import React from 'react';
import {View, StyleSheet} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';
import {Slider} from 'react-native-elements';

import sheet from '../styles/sheet';
import colors from '../styles/colors';
import {SF_OFFICE_COORDINATE} from '../utils';

import Page from './common/Page';
import BaseExamplePropTypes from './common/BaseExamplePropTypes';

const layerStyles = {
  building: {
    fillExtrusionColor: 'blue',
    fillExtrusionHeight: [
      'interpolate',
      ['linear'],
      ['zoom'],
      15,
      0,
      15.05,
      ['get', '高度'],
    ],
    fillExtrusionOpacity: 0.6,
    visibility:"none11"
  },
};

const styles = StyleSheet.create({
  slider: {
    alignItems: 'stretch',
    flex: 1,
    justifyContent: 'center',
    maxHeight: 60,
    paddingHorizontal: 24,
  },
});

class WatercolorRasterTiles extends React.Component {
  static propTypes = {
    ...BaseExamplePropTypes,
  };

  constructor(props) {
    super(props);

    this.state = {
      opacity: 1,
    };

    this.onOpacityChange = this.onOpacityChange.bind(this);
  }

  onOpacityChange(value) {
    this.setState({opacity: value});
  }

  render() {

    // https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
    // http://localhost:8082/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1359673693088064
    // http://localhost:8082/datamg/services/vectortile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1359673693088064

    // https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg

    const baseMap = 'http://10.16.28.4:8082/datamg-server/datamg/services/app/basemap/6686946635776'

    const rasterSourceProps1 = {
      id: 'building',
      tileUrlTemplates: [
        'http://10.16.28.4:8082/datamg-server/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1361143063097728',
      ],
      tileSize: 256,
    };

    const rasterSourceProps2 = {
      id: 'building',
      tileUrlTemplates: [
        'http://localhost:8082/datamg/services/tile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1359673693088064',
      ],
      tileSize: 256,
    };

    // pbf矢量瓦片
    const vectorSourceProps = {
      id: 'vectorSourceExample',
      tileUrlTemplates: [
        'http://10.16.28.4:8082/datamg-server/datamg/services/vectortile?x={x}&y={y}&l={z}&crs=EPSG:3857&serviceId=1361143063097728',
      ],
    };

    const location = [120.42762,31.32323]
    return (
      <Page {...this.props}>
        <MapboxGL.MapView style={sheet.matchParent} styleURL={baseMap}>
          <MapboxGL.Camera
            zoomLevel={2}
            centerCoordinate={location}
            followUserLocation
            followPitch={45}
          />

          <MapboxGL.UserLocation/>

          {/* arcgis底图 */}
          {/* <MapboxGL.RasterSource {...rasterSourceProps1}>
            <MapboxGL.RasterLayer
              id="buding"
              style={{rasterOpacity: this.state.opacity}}
            />
          </MapboxGL.RasterSource> */}

          {/* 园区建筑 */}
          {/* <MapboxGL.RasterSource {...rasterSourceProps2}>
            <MapboxGL.RasterLayer
              id="building01"
              sourceID="building"
              style={{rasterOpacity: this.state.opacity}}
            />
          </MapboxGL.RasterSource> */}

           <MapboxGL.VectorSource 
            {...vectorSourceProps}
            ref={(source) => {
              this._vectorSource = source;
            }}
            onPress={(e) => {
              console.log("geometry",e.features[0].geometry)
              alert(`建筑名称: ${e.features[0].properties.name}`);
            }}
          > 
           <MapboxGL.FillExtrusionLayer
             id="building3D"
            //  sourceID="vectorSourceExample"
             sourceLayerID="building" // 这个很关键，这个必须匹配上，否则图层无法显示
             style={layerStyles.building}
            />
              <MapboxGL.FillExtrusionLayer
             id="building3D1"
            //  sourceID="vectorSourceExample"
             sourceLayerID="清华同方" // 这个很关键，这个必须匹配上，否则图层无法显示
             visibility={false}
             style={layerStyles.building}
            />
            {/* <MapboxGL.FillLayer
              id="building3D1"
               sourceLayerID="清华同方" 
            /> */}
          </MapboxGL.VectorSource> 

        </MapboxGL.MapView>

        <View style={styles.slider}>
          <Slider
            value={this.state.opacity}
            onValueChange={this.onOpacityChange}
            thumbTintColor={colors.primary.blue}
            thumbTouchSize={{width: 44, height: 44}}
            maximumTrackTintColor={colors.secondary.purpleLight}
            minimumTrackTintColor={colors.secondary.purpleDark}
          />
        </View>
      </Page>
    );
  }
}

export default WatercolorRasterTiles;
